<template>
  <div class="modify-dialog">
    <slot>
      <el-button size="small" type="primary" @click="showDialog()">
        录入订单
      </el-button>
    </slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
      <Form v-bind="formOpts" v-on="formEvent">
        <template #formBtn>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onConfirm"> 确 定 </el-button>
          </div>
        </template>
      </Form>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import dayjs from "dayjs";
import { mapState } from "vuex";

export default {
  mixins: [modifyMixins],
  data() {
    return {
      labelPosition: "left",
      fileList: [],
      form: {
        storeName: {
          tag: "el-input",
          label: "订单名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入订单名称",
          },
        },
        deliveryDate: {
          tag: "el-date-picker",
          label: "发货日期",
          value: "",
          props: {
            clearable: true,
            placeholder: "请选择出库时间",
            pickerOptions: {
              // disabledDate (time) {
              // 	return time.getTime() < dayjs().startOf("day").valueOf();
              // },
            },
          },
        },
        customPhone: {
          tag: "el-input",
          label: "客户联系方式",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入客户联系方式",
          },
        },
        address: {
          tag: "el-input",
          label: "发货地址",
          value: "",
          props: {
            type: "textarea",
            clearable: true,
            placeholder: "请输入地址",
          },
        },
        storeImgs: {
          tag: "Uploader",
          label: "营业区原始图",
          value: [],
          props: {},
        },
        storageOriginImg: {
          tag: "Uploader",
          label: "仓库原始图",
          value: [],
          props: {},
        },
      },
    };
  },
  computed: {
    ...mapState(["tokenv3"]),
    preImgs() {
      return this.fileList.map((e) => `${this.$imgHost}${e}`);
    },
    title() {
      return (this.modify === "add" ? "新增" : "编辑") + "订单";
    },
    headers() {
      return {
        token: this.tokenv3 || window.$quinn.getStorage("tokenv3"),
      };
    },
  },
  methods: {
    onSuccess(res) {
      const { fileList = [] } = this;
      if (res.code == 0 && res.result) {
        fileList.push(res.result);
        this.fileList = fileList;
      }
    },
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.modify = modify || "add";
      for (const key in this.form) {
        let defValue = "";
        if (Array.isArray(this.form[key].value)) defValue = [];
        if (Object.hasOwnProperty.call(row, key))
          this.form[key].value = row[key] || defValue;
        else this.form[key].value = defValue;
      }
      this.formKey = this.$quinn.guid();
    },
    onSubmit(form) {
      const { modify, row } = this;
      console.log(form);
      let { deliveryDate } = form;
      const { id } = row;
      deliveryDate = dayjs(deliveryDate);
      if (!deliveryDate.isValid()) {
        form.deliveryDate = "";
        // return this.$message.error("请选择时间");
      } else form.deliveryDate = deliveryDate.format("YYYY-MM-DD");
      form.id = id;
      this.$api[modify === "add" ? "newOrderCreate" : "newOrderUpdate"](
        form
      ).then(this.submitDoneMsg);
    },
    onRemove(e, i) {
      this.fileList = this.fileList.filter((item, index) => index != i);
    },
  },
};
</script>

<style lang="less" scoped></style>
